<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>百度地图API显示多个标注点带百度样式信息检索窗口的代码</title>
		<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=IDvNBsejl9oqMbPF316iKsXR"></script>
		<script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script>
		<link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css" />
		<style type="text/css">
			body {
				margin: 0;
			}
			
			.demo_content {
				margin-bottom: 10px;
				border: none;
				width: 100%;
				padding: 0;
			}
			
			.BMap_cpyCtrl.BMap_noprint.anchorBL {
				display: none;
			}
			.anchorBL{
				display: none;
			}
		</style>
	</head>

	<body>
		<div class="demo_main">
			<fieldset class="demo_content">
				<div style="min-height: 600px; width: 100%;" id="map">
				</div>
				<script type="text/javascript">
					var markerArr = [{
						title: "名称：盛隆讲堂",
						point: "114.433912, 30.476142",
						address: "湖北省武汉市盛隆讲堂",
						tel: "18500000000"
					},{
						title: "名称：光谷广场",
						point: "114.407793,30.514113",
						address: "湖北省武汉市光谷广场",
						tel: "12306"
					}, {
						title: "名称：楚河汉街",
						point: "114.345398,30.564099",
						address: "湖北省武汉市楚河汉街 ",
						tel: "18500000000"
					}, {
						title: "名称：户部巷",
						point: "114.305926,30.553369",
						address: "湖北省武汉市户部巷",
						tel: "18500000000"
					}, {
						title: "名称：长江大桥",
						point: "114.294757,30.555483",
						address: "湖北省武汉市长江大桥",
						tel: "18500000000"
					}];
					var map; //Map实例  
					function map_init() {
						map = new BMap.Map("map");
						//第1步：设置地图中心点，武汉市  
						var point = new BMap.Point(114.311831, 30.598428);
						//第2步：初始化地图,设置中心点坐标和地图级别。  
						map.centerAndZoom(point, 13);
						//第3步：启用滚轮放大缩小  
						map.enableScrollWheelZoom(true);
						//第4步：向地图中添加缩放控件  
						var ctrlNav = new window.BMap.NavigationControl({
							anchor: BMAP_ANCHOR_TOP_LEFT,
							type: BMAP_NAVIGATION_CONTROL_LARGE
						});
						map.addControl(ctrlNav);
						//第5步：向地图中添加缩略图控件  
						var ctrlOve = new window.BMap.OverviewMapControl({
							anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
							isOpen: 1
						});
						map.addControl(ctrlOve);
						//第6步：向地图中添加比例尺控件  
						var ctrlSca = new window.BMap.ScaleControl({
							anchor: BMAP_ANCHOR_BOTTOM_LEFT
						});
						map.addControl(ctrlSca);
						//第7步：绘制点    
						for (var i = 0; i < markerArr.length; i++) {
							var p0 = markerArr[i].point.split(",")[0];
							var p1 = markerArr[i].point.split(",")[1];
							var maker = addMarker(new window.BMap.Point(p0, p1), i);
							addInfoWindow(maker, markerArr[i], i);
						}
					}
					// 添加标注  
					function addMarker(point, index) {
						var myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png",
							new BMap.Size(23, 25), {
								offset: new BMap.Size(10, 25),
								imageOffset: new BMap.Size(0, 0 - index * 25)
							});
						var marker = new BMap.Marker(point, {
							icon: myIcon
						});
						map.addOverlay(marker);
						return marker;
					}
					// 添加信息窗口  
					function addInfoWindow(marker, poi) {
						//pop弹窗标题  
						var title = '<div style="font-weight:bold;color:#CE5521;font-size:14px">' + poi.title + '</div>';
						//pop弹窗信息  
						var html = [];
						html.push('<table cellspacing="0" style="table-layout:fixed;width:100%;font:12px arial,simsun,sans-serif"><tbody>');
						html.push('<tr>');
						html.push('<td style="vertical-align:top;line-height:16px;width:38px;white-space:nowrap;word-break:keep-all">地址:</td>');
						html.push('<td style="vertical-align:top;line-height:16px">' + poi.address + ' </td>');
						html.push('</tr>');
						html.push('</tbody></table>');
						var infoWindow = new BMap.InfoWindow(html.join(""), {
							title: title,
							width: 200
						});
						var openInfoWinFun = function() {
							marker.openInfoWindow(infoWindow);
						};
						marker.addEventListener("click", openInfoWinFun);
						return openInfoWinFun;
					}
					//异步调用百度js  
					function map_load() {
						var load = document.createElement("script");
						load.src = "http://api.map.baidu.com/api?v=1.4&callback=map_init";
						document.body.appendChild(load);
					}
					window.onload = map_load;
				</script>
			</fieldset>
		</div>
	</body>

</html>